Pagination
A jQuery plugin for simple pagination.
Demo
Basic
Use
Main
pagination.js
pagination.css
Dependencies
core.js
mediaquery.js
Basic
Options
Set instance options by passing a valid object at initialization, or to the public defaults
method. Custom options for a specific instance can also be set by attaching a data-pagination-options
attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options.
Name | Type | Default | Description |
---|---|---|---|
ajax |
boolean |
false |
Flag to disable default click actions |
customClass |
string |
'' |
Class applied to instance |
labels.close |
string |
'Close' |
Close button text |
labels.count |
string |
'of' |
Gallery count separator text |
labels.next |
string |
'Next' |
Gallery control text |
labels.previous |
string |
'Previous' |
Gallery control text |
maxWidth |
string |
'980px' |
Width at which to auto-disable plugin |
visible |
int |
2 |
Visible pages before and after current page |
Events
Events are triggered on the target instance's element, unless otherwise stated.
Event | Description |
---|---|
update.pagination |
Page updated |
Methods
Methods are publicly available to all active instances, unless otherwise stated.
defaults
Extends plugin default settings; effects instances created hereafter.
$.pagination("defaults", { ... });
Parameters
Name | Type | Default | Description |
---|---|---|---|
options |
object |
{} |
New plugin defaults |
destroy
Removes plugin instance.
$(".target").pagination("destroy");
jump
Jump instance of plugin to specific page
$(".target").pagination("jump", 1);
CSS
Class | Type | Description |
---|---|---|
.fs-pagination-element |
element |
Target elmement |
.fs-pagination |
element |
Base widget class |
.fs-pagination.fs-pagination-mobile |
modifier |
Indicates mobile display |
.fs-pagination |
element |
Pages container |
.fs-pagination-page |
element |
Page element |
.fs-pagination-ellipsis |
element |
Ellipsis element |
.fs-pagination-page.fs-pagination-active |
modifier |
Indicates active page |
.fs-pagination-page.fs-pagination-first |
modifier |
Indicates first page |
.fs-pagination-page.fs-pagination-last |
modifier |
Indicates last page |
.fs-pagination-page.fs-pagination-visible |
modifier |
Indicates visible page |
.fs-pagination-control |
element |
Pagination button |
.fs-pagination-control.fs-pagination-control_previous |
modifier |
Indicates previous control |
.fs-pagination-control.fs-pagination-control_next |
modifier |
Indicates next control |
.fs-pagination-position |
element |
Mobile position indicator |
.fs-pagination-select |
element |
Mobile page dropdown |